<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)">
					<text>需要模具</text>
					<u-icon v-show="!isCollapse" name="arrow-up" color="#000a7b"></u-icon>
					<u-icon v-show="isCollapse" name="arrow-down" color="#000a7b"></u-icon>
				</view>
				<!-- @click="() => (isCollapse = !isCollapse)"> -->

				<view v-show="!isCollapse" v-for="(item, index) in taskInfo">
					<!-- <view class="record-item" style="font-weight: 700;">
						<text>序号: {{index}}</text>
					</view> -->
					<view class="record-item" v-show="item.assetCode">
						<view style="display: flex; justify-content: center; align-items: center">
							<view class="circle">
								{{ index + 1 }}
							</view>
							&nbsp; &nbsp;<text v-if="processesClassification != 1">模具编号</text>
							<text v-else>制芯编号</text>
						</view>
						<text>{{ item.assetCode ?? '' }}</text>
					</view>
					<view class="record-item" v-show="item.assetName">
						<text v-if="processesClassification != 1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模具名称</text><text v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制芯名称</text>
						<text>{{ item.assetName ?? '' }}</text>
					</view>
					<!-- <view class="record-item" v-show="taskInfo.assetName">
							<text>模具名称</text>
							<text>{{ taskInfo.assetName ?? '' }}</text>
						</view>
						<view class="record-item" v-show="taskInfo.equipName">
							<text>炉批次号</text>
							<text>{{ taskInfo.equipName ?? '' }}</text>
						</view>
						<view class="record-item">
							<text>模数</text>
							<text>{{ taskInfo.mouldQuantity ?? '' }}</text>
						</view>
						<view class="record-item">
							<text>计划数量</text>
							<text>{{ taskInfo.planQuantity ?? '' }}</text>
						</view>
						<view class="record-item" v-if="taskInfo.locationName">
							<text>模具位置</text>
							<text>{{ taskInfo.locationName ?? '' }}</text>
						</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="ConsumablesDetachInfo">
import { useDictionaryStore } from '@/stores/useDictionaryStore';
const props = defineProps({
	taskInfo: {
		type: Object,
		default: () => []
	},
	processesClassification: {
		type: Number,
		default: () => null
	},
});

const { taskInfo, processesClassification } = toRefs(props);

console.log('taskInfo', taskInfo.value, processesClassification.value)

// 是否折叠
const isCollapse = ref(false);

function changeTypeColor(text) {
	if (text.includes('已')) {
		return 'success';
	} else {
		return 'primary';
	}
}
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);

	.record-item {
		margin: 5px 0 !important;
		color: #333 !important;
		display: flex;
		align-items: end;
		font-size: 15px;

		> :first-child {
			min-width: 63px;
		}

		:deep(.u-tag__text--mini) {
			font-size: 13px;
			padding: 1px 3px 0;
		}
	}
	// .record-title {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	margin: 7px 0 3px 0;
	// 	color: #333 !important;
	// 	word-break: break-all;
	// }
}
.title {
	font-size: 16px;
	margin: 7px 0 10px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
.circle {
	font-size: 12px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	font-weight: bold;
}
</style>
